<template>
  <div class="login">
    <div class="login-content">
      <div>{{ title || '后台管理系统' }}</div>
      <div class="bottom-title">
        <span style="margin-right: 38px">品质源于关注</span>
        <span>创新引领未来</span>
      </div>
    </div>
    <a-form-model
      id="formLogin"
      ref="form"
      class="login-form"
      :model="form"
      :rules="rules"
      :hideRequiredMark="hideRequiredMark" >
      <a-alert
        v-if="isLoginError"
        type="error"
        showIcon
        style="margin-bottom: 24px;"
        :message="loginErrorInfo"
        closable
        :after-close="handleCloseLoginError"
      />
      <h3 class="title">欢迎登录</h3>
      <a-form-model-item prop="username" label="账号">
        <a-input v-model="form.username" size="large" placeholder="请输入账户" r>
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="password" label="密码">
        <a-input-password v-model="form.password" size="large" placeholder="请输入密码">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input-password>
      </a-form-model-item>
      <a-form-model-item prop="code" label="验证码" v-if="captchaEnabled">
        <a-input v-model="form.code" size="large" type="text" autocomplete="off" placeholder="验证码">
          <a-icon slot="prefix" type="security-scan" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          <img slot="suffix" class="getCaptcha" :src="codeUrl" @click="getCode">
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="rememberMe">
        <a-checkbox :checked="form.rememberMe" @change="rememberMe">记住密码</a-checkbox>
      </a-form-model-item>
      <a-form-item>
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="logining"
          :disabled="logining"
          @click="handleSubmit"
        >
          <span v-if="!logining">登 录</span>
          <span v-else>登 录 中...</span>
        </a-button>
      </a-form-item>
      <div style="float: right" v-if="register">
        <router-link class="register" :to="{ name: 'register' }">立即注册</router-link>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getCodeImg } from '@/api/login'
import { LOGIN_USERNAME, LOGIN_PASSWORD, LOGIN_REMEMBERME,ADMIN_TITLE } from '@/store/mutation-types'
import storage from 'store'

export default {
  components: {
  },
  data () {
    return {
      codeUrl: '',
      isLoginError: false,
      hideRequiredMark: true,
      loginErrorInfo: '',
      title: storage.get(ADMIN_TITLE),
      form: {
        username: '',
        password: '',
        code: undefined,
        uuid: '',
        rememberMe: false
      },
      rules: {
        username: [{ required: true, message: '请输入帐户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      register: false,
      logining: false,
      captchaEnabled: true
    }
  },
  created () {
    this.getStorage()
    this.getCode()
  },
  methods: {
    getCode () {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.form.uuid = res.uuid
        }
      })
    },
    getStorage () {
      const username = storage.get(LOGIN_USERNAME)
      const password = storage.get(LOGIN_PASSWORD)
      const rememberMe = storage.get(LOGIN_REMEMBERME)
      if (username) {
        this.form = {
          username: username,
          password: password,
          rememberMe: rememberMe
        }
      }
    },
    rememberMe (e) {
      this.form.rememberMe = e.target.checked
    },
    ...mapActions(['Login', 'Logout']),
    handleSubmit () {
      this.logining = true
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.rememberMe) {
            storage.set(LOGIN_USERNAME, this.form.username)
            storage.set(LOGIN_PASSWORD, this.form.password)
            storage.set(LOGIN_REMEMBERME, this.form.rememberMe)
          } else {
            storage.remove(LOGIN_USERNAME)
            storage.remove(LOGIN_PASSWORD)
            storage.remove(LOGIN_REMEMBERME)
          }
          this.Login(this.form)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              this.logining = false
            })
        } else {
          setTimeout(() => {
            this.logining = false
          }, 600)
        }
      })
    },
    loginSuccess (res) {
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.handleCloseLoginError()
    },
    requestFailed (err) {
      this.isLoginError = true
      this.loginErrorInfo = err
      this.form.code = undefined
      if (this.captchaEnabled) {
        this.getCode()
      }
    },
    handleCloseLoginError () {
      this.isLoginError = false
      this.loginErrorInfo = ''
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item{
  margin-bottom: 10px;
}
::v-deep .ant-input-affix-wrapper .ant-input{
  border-radius: 10px;
}
.login {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100vh;
  //background-image: url("../assets/loginImage/background.png");
  background-image: url("../../assets/background.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  .login-content {
    align-self: flex-start;
    justify-self: flex-start;
    margin-left: -40.2%;
    margin-top: 50px;
    font-size: 91px;
    font-weight: 700;
    letter-spacing: 10px;
    color: #152f86;
    .bottom-title {
      margin-top: 32px;
      padding-left: 45px;
      font-size: 36px;
      letter-spacing: 2.6px;
    }
  }
  // .el-button {
  //   margin-top: 28px;
  //   width: 100%;
  //   height: 44px;
  //   line-height: 12px;
  //   background-color: #0452fe;
  // }
}
.title {
  font-size: 50px;
  font-weight: 700;
  // margin: 0px auto 22px auto;
  margin-right: -18px;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 16.3px;
  white-space: nowrap;
}

.login-form {
  position: absolute;
  right: 10.2%;
  top: 45.2%;
  transform: translateY(-50%);
  border-radius: 6px;
  width: 22.7%;
  padding: 25px 25px 5px 25px;
  label {
    font-size: 14px;
  }
  .getCaptcha {
    display: block;
    width: 100%;
    height: 32px;
    margin: 4px 0;
  }
  .register {
    float: right;
  }
  button.login-button {
    width: 100%;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
</style>
